<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['安装管理[环卫]','图纸匹配规则']" icon="fa fa-newspaper-o" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	
	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header><span class="widget-icon"> <i class="fa fa-table"></i> </span><h2>图纸匹配规则</h2></header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn" style="width: calc(100% - 220px);">
							    <div class="top_module top_module_box">
                                    <span class="top_module_label module_text">车型</span>
                                    <select class="module_inp" name="useTypeL2" (change)="partTypeChange(1)" [(ngModel)]="tableParam.useTypeL2">
                                        <option value="">全部</option>
                                        <option value="0211">后挂双桶</option>
                                        <option value="0214">侧挂拉杆</option>
                                        <option value="0213">侧挂链条</option>
                                    </select>
                                </div>
							    <div class="top_module top_module_box">
                                    <span class="top_module_label module_text">零件类型</span>
                                    <select class="module_inp" name="componentType" [(ngModel)]="tableParam.componentType">
                                        <option value="">全部</option>
                                        <option [value]="item.componentType" *ngFor="let item of partTypeOption">{{item.componentType}}</option>
                                    </select>
                                </div>
								<div class="top_module">
									<span class="module_text">录入人员</span>
									<div class="s_hover_box">
										<select   class="select2"  id="userNameSelect2" style="width: 150px;">
											<option value=''></option>
										</select>
										<div class="s_del_icon" (click)='delUserName()'>x</div>
									</div>
								</div>
                                <div class="selectDate top_module">
                                    <table-select-date [notInit]='true' (outerTime)="getSelectTableTime($event)" ></table-select-date>
                                </div>
								<button class="btn btn-primary" (click)="table_search()">查询</button>
								<button class="btn btn-primary" (click)="addRule(MatchRuleModal)">添加</button>
								<button class="btn btn-primary" (click)="partType(PartTypeModal)">零件类型</button>
								<!--<button class="btn btn-primary" (click)="table_export()">导出</button>-->
							</div>
							<!--<div class="right top-search">
								<input type="text" [(ngModel)]="tableParam.searchKey" (change)="table_search()" class="search-input" placeholder="零件类型">
								<span class="top-search-box">
							        <button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>
							    </span>
							</div>-->
						</div>
                        
                        <div class="table_scroll">
                            <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                                <thead>
                                    <tr>
                                        <th>车型</th>
                                        <th>零件类型</th>
                                        <th>规则详情</th>
                                        <th>录入人员</th>
                                        <th>录入时间</th>
                                        <th>更新人员</th>
                                        <th>更新时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let row of tableData; let i = index" [attr.data-index]="i">
                                        <td>
                                            <span *ngIf="row.useTypeL2 == '0211'">后挂双桶</span>
                                            <span *ngIf="row.useTypeL2 == '0213'">侧挂链条</span>
                                            <span *ngIf="row.useTypeL2 == '0214'">侧挂拉杆</span>
                                        </td>
                                        <td>{{row.componentType}}</td>
                                        <td>
                                            <button type="button" (click)="viewRow(row,MatchRuleModal)">查看</button>
                                        </td>
                                        <td>{{row.createForUser}}</td>
                                        <td>{{row.createTime}}</td>
                                        <td>{{row.updateForUser}}</td>
                                        <td>{{row.updateTime}}</td>
                                        <td>
                                            <button type="button" (click)="editRow(row,MatchRuleModal)">编辑</button>
                                            <button type="button" (click)="deleteRow(row)">删除</button>
                                        </td>
                                        
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table-fix clearfix">
                            <paginator [totalRecords]="totalCount"
                                   [rows]="pageSize"
                                   [currentPage]="curPage - 1"
                                   (onPageChange)="paginate($event)">
                            </paginator>
                            <button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
                        </div>
					</div>
				</div>
			</div>
		</div>
	</sa-widgets-grid>
    
    <!-- 匹配规则表单   弹窗-->
    <section bsModal #MatchRuleModal="bs-modal" id="CarMeasureModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="closeMatchRuleModal(MatchRuleModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>     
                    <h4 class="modal-title">匹配规则</h4>
                </div>
                <form id="carMeasureForm"  class="form-horizontal" role="form" novalidate="novalidate" >
                    <div class="modal-body">
                        <div class="row form-horizontal">
                            <div class="form-group col-xs-12">
                                <label class="control-label col-xs-2">车型</label>
                                <div class="col-xs-8" >
                                    <select class="form-control" name="useTypeL2" [(ngModel)]='matchRuleForm.useTypeL2' (change)="useTypeL2Change()" [disabled]="formType == 'readonly'">
                                    	<option value="0213">侧挂链条</option>
                                    	<option value="0214">侧挂拉杆</option>
                                    	<option value="0211">后挂双桶</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-xs-12">
                                <label class="control-label col-xs-2">零件类型</label>
                                <div class="col-xs-8">
                                    <select class="form-control" name="componentType" [(ngModel)]='matchRuleForm.componentType' [disabled]="formType == 'readonly'">
                                        <option [value]="item.componentType" *ngFor="let item of popPartTypeOption">{{item.componentType}}</option>
                                    </select>
                                </div>
                            </div>
                            <div style="border-top: 1px solid #ccc;margin-bottom: 16px;clear: both;padding-top: 12px;font-weight: bold;font-size: 14px;">匹配条件</div>
                            <div class="form-group col-xs-6" *ngFor="let lis of matchRuleForm.drawDetailEntities">
                                <label class="col-xs-5">{{lis.index}}、{{lis.name}}</label>
                                <div class="col-xs-7" >
                                    <div class="inline_block">
                                        <div  (click)="sensorLisSelected(lis)" class="lisItem" style="margin-right: 8px;margin-left: 0;">
                                            <span class="el-checkbox__inner" [ngClass]="{'is-checked':lis.select == 1}"></span>
                                            <span>作为匹配条件</span>
                                        </div>
                                    </div>
                                    
                                    <!--<input class="form-control" name="carHeadBrand" autocomplete="off" [(ngModel)]='editRowData.carHeadBrand' placeholder="车头品牌"/>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" *ngIf="formType != 'readonly'">
                        <button type="button" class="btn btn-default" (click)="closeMatchRuleModal(MatchRuleModal)">取消</button>
                        <button type="button" class="btn btn-primary" (click)="matchRuleSubmit(MatchRuleModal)">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <!-- 匹配规则表单 弹窗end-->
    
    <!-- 零件类型表单   弹窗-->
    <section bsModal #PartTypeModal="bs-modal" id="CarPartType" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="closePartTypeModal(PartTypeModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>     
                    <h4 class="modal-title">零件类型</h4>
                </div>
                <form id="partTypeForm"  class="form-horizontal" role="form" novalidate="novalidate" style="padding: 0 10px;">
                    <div class="left page-header-btn" style="display: flex; padding: 20px 0;">
                        <div class="top_module top_module_box" style="margin-right: 12px;">
                            <span class="top_module_label module_text">车型</span>
                            <select class="module_inp" name="useTypeL2"  [(ngModel)]="partTypeForm.useTypeL2">
                                <option value="">全部</option>
                                <option value="0211">后挂双桶</option>
                                <option value="0214">侧挂拉杆</option>
                                <option value="0213">侧挂链条</option>
                            </select>
                        </div>
                        <button class="btn btn-primary" (click)="getPartTypeList()">查询</button>
                        <button class="btn btn-primary" (click)="addPartType(PartTypeModal, AddPartTypeModal)">添加</button>

                    </div>

                    <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table table_scroll">
                        <thead>
                            <tr>
                                <th>车型</th>
                                <th>零件类型</th>
                                <th>操作人</th>
                                <th>操作时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of partTableData; let i = index" [attr.data-index]="i">
                                <td class="form-group">
                                    <span *ngIf="row.useTypeL2 == '0211'">后挂双桶</span>
                                    <span *ngIf="row.useTypeL2 == '0213'">侧挂链条</span>
                                    <span *ngIf="row.useTypeL2 == '0214'">侧挂拉杆</span>
                                </td>
                                <td class="form-group">{{row.componentType}}</td>
                                <td class="form-group">{{row.updateForUser?row.updateForUser:row.createForUser}}</td>
                                <td class="form-group">{{row.createTime}}</td>
                                <td class="form-group">
                                    <button class="" type="button" (click)="editPartType(row,PartTypeModal,AddPartTypeModal)">编辑</button>
                                    <button type="button" (click)="deletePartType(row)">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="table-fix clearfix">
                        <paginator [totalRecords]="partTotalCount"
                               [rows]="partPageSize"
                               [currentPage]="partCurPage - 1"
                               (onPageChange)="partTypePaginate($event)">
                        </paginator>
                        <button type="button" class="btn default refresh_btn" (click)="getPartTypeList()"><i class="fa fa-refresh"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <!-- 零件类型表单 弹窗end-->

    <!-- 添加零件类型表单   弹窗-->
    <section bsModal #AddPartTypeModal="bs-modal" id="AddPartType" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="closeAddModal(AddPartTypeModal, PartTypeModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>     
                    <h4 class="modal-title">添加零件类型</h4>
                </div>
                <form id="AddPartTypeForm"  class="form-horizontal" role="form" novalidate="novalidate" >
                    <div class="modal-body">
                        <div class="row form-horizontal">
                            <div class="form-group col-xs-12">
                                <label class="control-label col-xs-2">车型</label>
                                <div class="col-xs-8" >
                                    <select class="form-control" name="useTypeL1" [(ngModel)]='partTypeForm.useTypeL1'>
                                    	<option value="0213">侧挂链条</option>
                                    	<option value="0214">侧挂拉杆</option>
                                    	<option value="0211">后挂双桶</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-xs-12">
                                <label class="control-label col-xs-2">零件类型</label>
                                <div class="col-xs-8">
                                    <input class="form-control tableInput" type="text" name="componentType" [(ngModel)]='partTypeForm.componentType' placeholder="请输入零件类型" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" (click)="closeAddModal(AddPartTypeModal, PartTypeModal)">取消</button>
                        <button type="button" class="btn btn-primary" (click)="addPartTypeSubmit(AddPartTypeModal, PartTypeModal)">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <!-- 添加零件类型表单 弹窗end-->
</div>